<template>
  <div>
    <h1>axios</h1>
    <ul>
      <li v-for="(item, index) in data" :key="index">
        <p>{{ item.stu_id }}</p>
        <p>{{ item.stu_name }}</p>
        <!-- 需求：有的图片由于当年没有传入  有图片渲染图片 没有图片的使用默认图片shuaiqi -->
        <img
          :style="{ width: 50 + 'px', height: 50 + 'px' }"
          :src="item.stu_head_img != '' ? item.stu_head_img : img_url"
          alt=""
          srcset=""
        />
        <!-- <img src="./assets/shuaiqi.jpg" alt="" srcset="" /> -->
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data: [],
      img_url: require("./assets/shuaiqi.jpg"),
    };
  },
  // 请求学生信息
  mounted() {
    axios
      .get("http://localhost:8001/search_info")
      .then((res) => {
        console.log(res);
        /* 
        axios返回响应报文的结构
        {
          data:{}  服务器返回的响应数据
          status:200  服务器返回的http的状态码
          statusText:'ok'  服务器返回的响应状态码的描述  
        }
        */
        console.log(res.data);
        this.data = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="scss" scoped>
</style>